<template>
	<a-spin :spinning="loading">
		<div class="bg-white">
			<div class="p-20">
				<div class="flex items-center">
					<div class="flex items-center mr-20">
						<span class="flex-none">车型名称：</span>
						<div class="px-10">
							<a-input class="w-300" :max-length="50" v-model="name" placeholder="请输入车型名称" />
						</div>
					</div>

					<div class="flex items-center">
						<span class="flex-none">车型组：</span>
						<div class="px-10">
							<a-select placeholder="请选择车型组" class="w-300" v-model="vehicleGroupCode">
								<a-select-option :value="item.code" v-for="(item, index) in groupGetList" :key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</div>
						<a-button type="primary" class="mx-5" @click="searchHandle">查询</a-button>
						<a-button class="mx-5" @click="resetHandle">重置</a-button>
					</div>
				</div>

				<div class="flex items-center" style="margin-top: 8px">
					<span class="flex-none">车型品牌：</span>
					<div class="px-10">
						<a-input class="w-300" :max-length="50" v-model="brand" placeholder="请输入车型品牌" />
					</div>
					<span class="flex-none ml-18">车型编码：</span>
					<div class="">
						<a-input class="w-300" :max-length="50" v-model="id" placeholder="请输入车型编码" />
					</div>
				</div>

				<div class="mt-20" v-if="$permissionJudge('VehicleTypeCreate')">
					<a-button type="primary" class="mr-5" @click="addHandle">
						<a-icon type="plus" />
						<span>新建</span>
					</a-button>
				</div>

				<div class="mt-20">
					<a-alert class="mb-10" message="车型编码为车辆唯一编码，可以标识任一型号任一款式车辆" type="info" show-icon />
				</div>

				<!--列表数据-->
				<div class="mt-20">
					<a-table class="table-con" :columns="columns" :data-source="pageList" :pagination="false">
						<!--车型名称+车牌-->
						<template #name="val, data">
							<span>{{ data.name }}{{ data.vehiclePlateName }}</span>
						</template>

						<!--排量.变速箱.动力.承载力-->
						<template #config="val, data">
							<span>{{ data.outputVolumn }}{{ data.outputType }}.{{
                  transmissionList &&
                  transmissionList.find((x) => x.value == data.transmissionType) &&
                  transmissionList.find((x) => x.value == data.transmissionType).name
                }}.{{
                  fuelList &&
                  fuelList.find((x) => x.value == data.fuelType) &&
                  fuelList.find((x) => x.value == data.fuelType).name
                }}.{{ data.doorNum }}门{{ data.passengerNum }}座</span>
						</template>

						<!--图片-->
						<template #pic="val, data">
							<div class="flex justify-center">
								<img :src="data.pcImgUrl" alt=""
									class="w-40 h-40 br5 object-cover mx-5 ss-img cursor-pointer"
									@click="openPreviewImage(data.pcImgUrl)" />
								<!-- <img
                  :src="data.mobileImgUrl"
                  alt=""
                  class="w-40 h-40 br5 object-cover mx-5 ss-img cursor-pointer"
                  @click="openPreviewImage(data.mobileImgUrl)"
                /> -->
							</div>
						</template>

						<!--设置-->
						<template #set="val, data">
							<a class="mr-20" @click="editHandle(data)"
								v-if="$permissionJudge('VehicleTypeUpdate')">编辑</a>
							<a class="text-red-501" @click="delHandle(data)"
								v-if="$permissionJudge('VehicleTypeDelete')">删除</a>
						</template>
					</a-table>

					<!--底部页码-->
					<div class="flex justify-end mt-20 items-center">
						<div class="pr-20">共{{ rowCount }}条记录，第{{ pageNum }}/{{ Math.ceil(rowCount / rowsNum) }} 页</div>
						<a-pagination v-model="pageNum" show-size-changer show-quick-jumper :page-size.sync="rowsNum"
							:total="rowCount" @showSizeChange="sizeChange" @change="pageChange">
						</a-pagination>
					</div>
				</div>
			</div>
		</div>

		<!--新建或者编辑弹框-->
		<a-modal :title="editInfo.id > 0 ? '修改车型信息' : '添加车型信息'" v-model="isShowCreateEditPop"
			:confirm-loading="createEditLoading" :width="1250" @cancel="cancelHandle" @ok="confirmHandle">
			<a-form :form="createEditForm">
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="车型编码" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-input placeholder="请输入车型编码" :maxLength="8" />
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item label="车型名称" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-input placeholder="请输入车型名称" :maxLength="64" v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入车型名称', whitespace: true }],
                    initialValue: editInfo.name,
                  },
                ]" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="车牌照" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-select allow-clear placeholder="请选择车牌照" v-decorator="[
                  'vehiclePlateCode',
                  { rules: [{ required: false, message: '请选择车牌照' }], initialValue: editInfo.vehiclePlateCode },
                ]">
								<a-select-option :value="item.code" v-for="(item, index) in vehiclePlateList"
									:key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item label="品牌" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-input placeholder="请输入品牌" :maxLength="64" v-decorator="[
                  'brandName',
                  {
                    rules: [
                      {
                        required: true,
                        pattern: /^[\u4E00-\u9FA5a-zA-Z]/,
                        message: '请输入正确的品牌',
                        whitespace: true,
                      },
                    ],
                    initialValue: editInfo.brandName,
                  },
                ]" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="年款" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-input placeholder="请输入年款" :maxLength="4" v-decorator="[
                  'modelYear',
                  { rules: [{ required: false, message: '请输入年款' }], initialValue: editInfo.modelYear },
                ]" />
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item label="车型组" :labelCol="{ span: 6, offset: 0 }" labelAlign="left"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-select placeholder="请选择车型组" v-decorator="[
                  'groupCode',
                  { rules: [{ required: true, message: '请选择车型组' }], initialValue: editInfo.groupCode },
                ]">
								<a-select-option :value="item.code" v-for="(item, index) in groupGetList" :key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="变速箱类型" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-select placeholder="请选择变速箱类型" v-decorator="[
                  'transmissionType',
                  { rules: [{ required: true, message: '请选择变速箱类型' }], initialValue: editInfo.transmissionType },
                ]">
								<a-select-option :value="item.value" v-for="(item, index) in transmissionList"
									:key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item label="排量值" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-input placeholder="请输入排量值" :maxLength="8" class="w-full"
								:disabled="createEditForm.getFieldValue('fuelType') == 4" v-decorator="[
                  'outputVolumn',
                  { rules: [{ required: true, message: '请输入排量值' }], initialValue: editInfo.outputVolumn },
                ]" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="动力类型" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-select placeholder="请选择动力类型" @change="fuelTypeChange" v-decorator="[
                  'fuelType',
                  { rules: [{ required: true, message: '请选择动力类型' }], initialValue: editInfo.fuelType },
                ]">
								<a-select-option :value="item.value" v-for="(item, index) in fuelList" :key="index">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item label="排量类型" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-radio-group :disabled="createEditForm.getFieldValue('fuelType') == 4" v-decorator="[
                  'outputType',
                  { rules: [{ required: true, message: '请选择排量类型' }], initialValue: editInfo.outputType },
                ]" placeholder="请选择排量类型">
								<a-radio value="T">T</a-radio>
								<a-radio value="L">L</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="24">
					<a-col :span="12">
						<a-row :gutter="24">
							<a-col :span="12">
								<a-form-item label="门数" labelAlign="left" :labelCol="{ span: 8, offset: 0 }"
									:wrapperCol="{ span: 16, offset: 0 }">
									<a-input-number placeholder="请输入门数" :min="0" :max="100" class="w-full"
										:precision="0" v-decorator="[
                      'doorNum',
                      { rules: [{ required: true, message: '请输入门数' }], initialValue: editInfo.doorNum },
                    ]" />
								</a-form-item>
							</a-col>

							<a-col :span="12">
								<a-form-item label="座数" labelAlign="left" :labelCol="{ span: 8, offset: 0 }"
									:wrapperCol="{ span: 16, offset: 0 }">
									<a-input-number placeholder="请输入座数" :min="0" :max="100" class="w-full"
										:precision="0" v-decorator="[
                      'passengerNum',
                      { rules: [{ required: true, message: '请输入座数' }], initialValue: editInfo.passengerNum },
                    ]" />
								</a-form-item>
							</a-col>
						</a-row>
					</a-col>
					<a-col :span="12">
						<a-form-item label="保养间隔里程" labelAlign="left" :labelCol="{ span: 6, offset: 0 }"
							:wrapperCol="{ span: 18, offset: 0 }">
							<a-input-number placeholder="请输入保养间隔里程(km)" :min="0" :max="10000000" class="w-full"
								:precision="0" v-decorator="[
		          'intervalMaintainLimit',
		          {
		            rules: [{ required: true, message: '请输入保养间隔里程' }],
		            initialValue: editInfo.intervalMaintainLimit,
		          },
		        ]" />
						</a-form-item>
					</a-col>


				</a-row>

				<!-- <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="保养间隔里程"
              labelAlign="left"
              :labelCol="{ span: 6, offset: 0 }"
              :wrapperCol="{ span: 18, offset: 0 }"
            >
			
              <a-input-number
                placeholder="请输入保养间隔里程(km)"
                :min="0"
                :max="10000000"
                class="w-full"
                :precision="0"
                v-decorator="[
                  'intervalMaintainLimit',
                  {
                    rules: [{ required: true, message: '请输入保养间隔里程' }],
                    initialValue: editInfo.intervalMaintainLimit,
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row> -->

				<a-row :gutter="24">
					<a-col :span="12">
						<div class="flex">
							<a-form-item label="桌面端展示" labelAlign="left" :required="true" class="mr-20">
								<Upload @uploadSuccess="uploadSuccess($event, 'pcImgUrl')">
									<div class="
                      w-120
                      h-120
                      flex
                      items-center
                      justify-center
                      ss-up-btn
                      br10
                      overflow-hidden
                      cursor-pointer
                      relative
                    ">
										<div class="
                        w-20
                        h-20
                        flex
                        justify-center
                        items-center
                        bg-red-501
                        br1000
                        text-white
                        right-0
                        top-0
                        absolute
                        cursor-pointer
                      " @click.stop="delPicHandle('pcImgUrl')"
											v-if="createEditForm.getFieldValue('pcImgUrl') || editInfo.pcImgUrl">
											<span class="-mt-3">x</span>
										</div>

										<img class="w-120 h-120 object-cover"
											v-if="createEditForm.getFieldValue('pcImgUrl') || editInfo.pcImgUrl"
											:src="createEditForm.getFieldValue('pcImgUrl') || editInfo.pcImgUrl"
											alt="avatar" />
										<div v-else class="text-center">
											<a-icon :type="loading ? 'loading' : 'plus'" />
											<div class="ant-upload-text">上传</div>
										</div>
									</div>
								</Upload>
							</a-form-item>

							<!--  <a-form-item label="移动端展示" labelAlign="left" :required="true">
                <Upload @uploadSuccess="uploadSuccess($event, 'mobileImgUrl')">
                  <div
                    class="w-120 h-120 flex items-center justify-center ss-up-btn br10 overflow-hidden cursor-pointer"
                  >
                    <div
                      class="
                        w-20
                        h-20
                        flex
                        justify-center
                        items-center
                        bg-red-501
                        br1000
                        text-white
                        right-0
                        top-0
                        absolute
                        cursor-pointer
                      "
                      v-if="createEditForm.getFieldValue('mobileImgUrl') || editInfo.mobileImgUrl"
                      @click.stop="delPicHandle('mobileImgUrl')"
                    >
                      <span class="-mt-3">x</span>
                    </div>

                    <img
                      class="w-120 h-120 object-cover"
                      v-if="createEditForm.getFieldValue('mobileImgUrl') || editInfo.mobileImgUrl"
                      :src="createEditForm.getFieldValue('mobileImgUrl') || editInfo.mobileImgUrl"
                      alt="avatar"
                    />
                    <div v-else class="text-center">
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">上传</div>
                    </div>
                  </div>
                </Upload>
              </a-form-item> -->
						</div>
					</a-col>
					<a-col :span="12">
						<a-form-item label="车型描述" labelAlign="left">
							<a-input :maxLength="128" :rows="4" type="textarea" placeholder="请输入车型描述" />

							<a-input type="hidden" v-decorator="['id', { initialValue: editInfo.id }]" />
							<a-input type="hidden" v-decorator="['pcImgUrl', { initialValue: '' }]" />
							<!-- <a-input type="hidden" v-decorator="['mobileImgUrl', { initialValue: '' }]" /> -->
						</a-form-item>
					</a-col>
				</a-row>
				<div style="font-weight: bold;">哈啰车型匹配</div>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="品牌" labelAlign="right" :labelCol="{ span: 3, offset: 0 }"
							:wrapperCol="{ span: 21, offset: 0 }">
							<a-select v-bind="options_1" allowClear show-search
								@focus="searchKey = ''; helloPageNum = 1; getHelloList('品牌')" :filterOption="false"
								@search="searchCityData($event, '品牌')" placeholder="请选择品牌"
								v-model="helloListObj.brandName">
								<a-select-option :value="item.brandName" v-for="(item, index) in helloListObj.brand"
									:key="item.id">
									{{ item.brandName }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="车系" labelAlign="right" :labelCol="{ span: 3, offset: 0 }"
							:wrapperCol="{ span: 21, offset: 0 }">
							<a-select v-bind="options_2" allowClear show-search
								@focus="searchKey = ''; helloPageNum = 1; getHelloList('车系')" :filterOption="false"
								@search="searchCityData($event, '车系')" placeholder="请选择车系"
								v-model="helloListObj.seriesName">
								<a-select-option :value="item.seriesName"
									v-for="(item, index) in helloListObj.vehicleSeries" :key="item.id">
									{{ item.seriesName }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="年款" labelAlign="right" :labelCol="{ span: 3, offset: 0 }"
							:wrapperCol="{ span: 21, offset: 0 }">
							<a-select v-bind="options_3" allowClear show-search
								@focus="searchKey = ''; helloPageNum = 1; getHelloList('年份')" :filterOption="false"
								@search="searchCityData($event, '年份')" v-model="helloListObj.modelYear"
								placeholder="请选择年款">
								<a-select-option :value="item.modelYear"
									v-for="(item, index) in helloListObj.modelYearList" :key="item.id">
									{{ item.modelYear }}款
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="排量" labelAlign="right" :labelCol="{ span: 3, offset: 0 }"
							:wrapperCol="{ span: 21, offset: 0 }">
							<a-select v-bind="options_4" allowClear show-search
								@focus="searchKey = ''; helloPageNum = 1; getHelloList('排量')" :filterOption="false"
								@search="searchCityData($event, '排量')" v-model="helloListObj.displacement"
								placeholder="请选择排量">
								<a-select-option :value="item.displacement"
									v-for="(item, index) in helloListObj.displacementList" :key="item.id">
									{{ item.displacement }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="哈啰车型编码" labelAlign="right" :labelCol="{ span: 3, offset: 0 }"
							:wrapperCol="{ span: 21, offset: 0 }">
							<a-select v-bind="options_5" allowClear show-search
								@focus="searchKey = ''; helloPageNum = 1; getHelloList()" :filterOption="false"
								@search="searchCityData" @popupScroll="scroll" placeholder="请选择哈啰车型编码" v-decorator="[
						    'helloVehicleTypeCode',
						    { rules: [{ required: false, message: '请选择哈啰车型编码' }], initialValue: editInfo.helloVehicleTypeCode },
						  ]">
								<a-select-option :value="item.helloVehicleTypeCode" v-for="(item, index) in helloList"
									:key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-modal>

		<!--图片预览-->
		<a-modal :visible="isPreviewVisible" :footer="null" @cancel="isPreviewVisible = false">
			<div class="m-20">
				<img class="mx-w-700 mx-h-700 w-full" :src="previewImage" />
			</div>
		</a-modal>
	</a-spin>
</template>

<script>
	import {
		add,
		detail,
		getPagedList,
		edit,
		deleteInfo,
		helloVehicleType,
		vehicleGroupGetList,
		getVehiclePlates
	} from '@/api/car'
	import {
		getDictList
	} from '@/api/dictionaryData'
	import Upload from '@/components/Upload'
	import {
		mapGetters
	} from 'vuex'
	import {
		cloneDeep,
		debounce
	} from 'lodash'

	export default {
		name: 'ModelItem',
		components: {
			Upload,
		},
		data() {
			return {
				options_1: {
					key: 1
				},
				options_2: {
					key: 2
				},
				options_3: {
					key: 3
				},
				options_4: {
					key: 4
				},
				options_5: {
					key: 5
				},
				columns: [{
						title: '车型id',
						dataIndex: 'id',
					},
					{
						title: '品牌',
						dataIndex: 'brandName',
						width: '15%',
					},
					{
						title: '车型名称',
						dataIndex: 'name',
						scopedSlots: {
							customRender: 'name'
						},
						width: '15%',
					},
					{
						title: '年款',
						dataIndex: 'modelYear',
					},
					{
						title: '车型组',
						dataIndex: 'groupName',
					},
					{
						title: '排量.变速箱.动力.承载力',
						align: 'center',
						scopedSlots: {
							customRender: 'config'
						},
					},
					{
						title: '车型图片',
						align: 'center',
						scopedSlots: {
							customRender: 'pic'
						},
					},
					{
						title: '操作',
						align: 'center',
						scopedSlots: {
							customRender: 'set'
						},
					},
				],

				groupGetList: [], // 车型列表不分页
				helloList: [], //哈罗列表
				helloListObj: {
					brand: [],
					vehicleSeries: [],
					modelYearList: [],
					displacementList: [],
					brandName: undefined, //品牌
					seriesName: undefined, //车系
					modelYear: undefined, //年费
					displacement: undefined, //排量
				},
				searchKey: '',
				searchLoading: false,
				vehiclePlateList: [], // 车牌照列表

				createEditForm: this.$form.createForm(this), // 表单对象
				isShowCreateEditPop: false, // 是否显示添加弹框
				createEditLoading: false, // 弹框加载动画

				transmissionList: [], // 变速箱列表
				fuelList: [], // 动力列表

				editInfo: {
					id: 0,
					sipp: '', // 国际标准车型代码(车辆四字码)
					name: '', // 车型名称
					brandName: '', // 车型品牌
					vehiclePlateCode: undefined, // 车牌照
					modelYear: '', // 年款
					groupCode: undefined, // 车型组编码
					outputVolumn: '', // 排量值
					outputType: '', // 排量类型,T,L
					transmissionType: undefined, // 变速箱类型
					fuelType: undefined, // 动力类型
					pcImgUrl: '', // PC端图片链接
					// mobileImgUrl: '', // 手机端图片链接
					passengerNum: '', // 乘客数
					doorNum: '', // 车门数
					description: '', //车型描述
					// intervalMaintainMonths: '', // 保养间隔时间(月)
					intervalMaintainLimit: '', // 保养间隔里程(km)
					helloVehicleTypeCode: undefined,
				},

				loading: true, // 页面是否在加载中
				pageList: [], // 列表总数据
				name: '', // 车型名称
				brand: '', //车型品牌
				id: undefined, //车型id
				vehicleGroupCode: undefined, // 车型组
				pageNum: 1, // 页码
				rowsNum: 10, // 每页的数据
				rowCount: 0, // 总页码数据
				isPreviewVisible: false, // 是否预览图片
				previewImage: '', // 图片预览
				helloPageNum: 1,
				detailId: undefined
			}
		},

		watch: {
			'editInfo.fuelType': {
				handler(v) {
					if (v && v == 4) {
						this.$nextTick(() => {
							this.createEditForm.setFieldsValue({
								outputVolumn: '0', // 排量值
								outputType: 'L',
							})
						})
					}
				},
				immediate: true,
			},
		},
		created() {
			this._getPagedList() // 获取列表
			this._vehicleGroupGetList() // 获取车型列表
			this._getVehiclePlates() // 获取车牌照列表
			this.getHelloList()

			this.$utils.getDictList('TransmissionType').then((res) => {
				//变速箱类型
				let _arr = res.map((item, index) => {
					return {
						...item,
						value: item.value * 1,
					}
				})
				this.transmissionList = _arr
			})

			this.$utils.getDictList('FuelType').then((res) => {
				//动力类型
				let _arr = res.map((item, index) => {
					return {
						...item,
						value: item.value * 1,
					}
				})
				this.fuelList = _arr
			})
		},
		methods: {
			_getPagedList() {
				// 获取列表
				this.loading = true
				getPagedList({
						name: this.name.trim(),
						brandName: this.brand.trim(),
						id: +this.id,
						vehicleGroupCode: this.vehicleGroupCode,
						pageNo: this.pageNum,
						pageSize: this.rowsNum,
					})
					.then((res) => {
						this.pageList = res.items
						this.rowCount = res.rowCount
					})
					.finally(() => {
						this.loading = false
					})
			},
			cloneDeep,
			searchCityData(searchKey, name) {
				console.log('11111', searchKey, name)
				this.searchKey = searchKey
				if (name == '年份') {
					const searchKey = this.searchKey.replace(/[^\d]/g, '');
					this.searchKey = searchKey
				}
				this.helloPageNum = 1
				this.getHelloList(name)
			},
			scroll(e) {
				const {
					scrollHeight,
					scrollTop,
					clientHeight
				} = e.target
				if (scrollHeight - scrollTop === clientHeight) {
					if (this.helloList.length === this.total) return
					this.helloPageNum++
					this.getHelloList()
				}
			},
			getHelloList(name) {
				console.log('是我呀', name)
				let data = {
					pageNum: this.helloPageNum,
					rowsNum: 30,

				}
				if (name == '品牌') {
					data.brandName = this.searchKey.trim()
				} else if (name == '车系') {
					console.log(this.helloListObj.brandName, '有数据吗')
					data.brandName = this.helloListObj.brandName
					data.seriesName = this.searchKey.trim()
				} else if (name == '年份') {
					data.brandName = this.helloListObj.brandName
					data.seriesName = this.helloListObj.seriesName
					data.modelYear = this.searchKey ? this.searchKey.trim() : undefined
				} else if (name == '排量') {
					data.brandName = this.helloListObj.brandName
					data.seriesName = this.helloListObj.seriesName
					data.modelYear = this.helloListObj.modelYear ? this.helloListObj.modelYear : undefined
					data.displacement = this.searchKey.trim()
				} else {
					data.brandName = this.helloListObj.brandName
					data.seriesName = this.helloListObj.seriesName
					data.modelYear = this.helloListObj.modelYear ? this.helloListObj.modelYear : undefined
					data.displacement = this.helloListObj.displacement
					data.vehicleModelCode = this.searchKey.trim()
				}
				helloVehicleType(data).then((res) => {
					const {
						items,
						rowCount
					} = res
					// setTimeout(() => {

					// }, 500);
					this.$nextTick(() => {
						this.helloList = this.helloPageNum === 1 ? items : this.helloList.concat(items)
						// if (name == '品牌') {
						// 	const duplicates = this.helloList.filter((item, index) =>
						// 		this.helloList.findIndex(i => i.brandName === item.brandName) === index
						// 		);
						// 	console.log(duplicates, '我是品牌')
						// 	this.helloListObj.brand = duplicates
						// } else if (name == '车系') {
						// 	const duplicates = this.helloList.filter((item, index) =>
						// 		this.helloList.findIndex(i => i.seriesName === item.seriesName) ===
						// 		index);

						// 	this.helloListObj.vehicleSeries = duplicates
						// } else if (name == '年份') {
						// 	const duplicates = this.helloList.filter((item, index) =>
						// 		this.helloList.findIndex(i => i.modelYear === item.modelYear) === index
						// 		);

						// 	this.helloListObj.modelYearList = duplicates
						// } else if (name == "排量") {
						// 	const duplicates = this.helloList.filter((item, index) =>
						// 		this.helloList.findIndex(i => i.displacement === item.displacement) ===
						// 		index);
						// 	this.helloListObj.displacementList = duplicates
						// } else if (!name && this.detailId) {
						// 	this.helloListObj.brand = this.helloList
						// 	this.helloListObj.vehicleSeries = this.helloList
						// 	this.helloListObj.modelYearList = this.helloList
						// 	this.helloListObj.displacementList = this.helloList
						// 	this.helloListObj.brandName = this.helloList[0].brandName
						// 	this.helloListObj.seriesName = this.helloList[0].seriesName
						// 	this.helloListObj.displacement = this.helloList[0].displacement
						// 	this.helloListObj.modelYear = this.helloList[0].modelYear
						// }
						if (name === '品牌') {
							this.filterAndAssign(this.helloList, 'brandName', 'brand');
						} else if (name === '车系') {
							this.filterAndAssign(this.helloList, 'seriesName', 'vehicleSeries');
						} else if (name === '年份') {
							this.filterAndAssign(this.helloList, 'modelYear', 'modelYearList');
						} else if (name === '排量') {
							this.filterAndAssign(this.helloList, 'displacement', 'displacementList');
						} else if (!name && this.detailId) {
							const firstItem = this.helloList[0];
							this.helloListObj.brand = this.helloList;
							this.helloListObj.vehicleSeries = this.helloList;
							this.helloListObj.modelYearList = this.helloList;
							this.helloListObj.displacementList = this.helloList;
							if (firstItem) {
								this.helloListObj.brandName = firstItem.brandName;
								this.helloListObj.seriesName = firstItem.seriesName;
								this.helloListObj.displacement = firstItem.displacement;
								this.helloListObj.modelYear = firstItem.modelYear;
							}

						}
						console.log(this.helloListObj, '全部数据')
						this.total = rowCount
					});

				})

			},
			filterAndAssign(list, prop, targetProp) {
				const duplicates = list.filter(
					(item, index) => list.findIndex(i => i[prop] === item[prop]) === index
				);
				this.helloListObj[targetProp] = duplicates;
			},
			_vehicleGroupGetList() {
				// 获取车型列表
				vehicleGroupGetList().then((res) => {
					this.groupGetList = res
				})
			},

			_getVehiclePlates() {
				//  获取车牌照列表
				getVehiclePlates().then((res) => {
					this.vehiclePlateList = [...res]
				})
			},

			fuelTypeChange(e) {
				// 车动力类型贴换
				if (e == 4) {
					this.createEditForm.setFieldsValue({
						outputVolumn: '0', // 排量值
						outputType: 'L',
					})
				}
				console.log(e, '21')
			},

			searchHandle() {
				// 搜索
				this.pageNum = 1
				this._getPagedList()
			},

			resetHandle() {
				// 重置
				this.name = ''
				this.brand = ''
				this.id = undefined
				this.vehicleGroupCode = undefined
				this._getPagedList()
			},

			sizeChange(pageNum, rowsNum) {
				// 每页数量变化的时候
				this.pageNum = pageNum
				this.rowsNum = rowsNum
				this._getPagedList()
			},

			pageChange(pageNum, rowsNum) {
				this.pageNum = pageNum
				this.rowsNum = rowsNum
				this._getPagedList()
			},

			addHandle() {
				this.helloListObj = {
					brand: [],
					vehicleSeries: [],
					modelYearList: [],
					displacementList: [],
					brandName: undefined, //品牌
					seriesName: undefined, //车系
					modelYear: undefined, //年费
					displacement: undefined, //排量
				}
				this.detailId = undefined
				// 添加信息
				this.editInfo = {
					id: 0,
					sipp: '', // 国际标准车型代码(车辆四字码)
					name: '', // 车型名称
					brandName: '', // 车型品牌
					vehiclePlateCode: undefined, // 车牌照
					modelYear: '', // 年款
					groupCode: undefined, // 车型组编码
					outputVolumn: '', // 排量值
					outputType: '', // 排量类型,T,L
					transmissionType: undefined, // 变速箱类型
					fuelType: undefined, // 动力类型
					pcImgUrl: '', // PC端图片链接
					// mobileImgUrl: '', // 手机端图片链接
					passengerNum: '', // 乘客数
					doorNum: '', // 车门数
					description: '', //车型描述
					// intervalMaintainMonths: '', // 保养间隔时间(月)
					intervalMaintainLimit: '', // 保养间隔里程(km)
					helloVehicleTypeCode: undefined
				}

				this.createEditForm.setFieldsValue({
					id: 0,
					sipp: '', // 国际标准车型代码(车辆四字码)
					name: '', // 车型名称
					brandName: '', // 车型品牌
					vehiclePlateCode: undefined, // 车牌照
					modelYear: '', // 年款
					groupCode: undefined, // 车型组编码
					outputVolumn: '', // 排量值
					outputType: '', // 排量类型,T,L
					transmissionType: undefined, // 变速箱类型
					fuelType: undefined, // 动力类型
					pcImgUrl: '', // PC端图片链接
					// mobileImgUrl: '', // 手机端图片链接
					passengerNum: '', // 乘客数
					doorNum: '', // 车门数
					description: '', //车型描述
					// intervalMaintainMonths: '', // 保养间隔时间(月)
					intervalMaintainLimit: '', // 保养间隔里程(km)
					helloVehicleTypeCode: undefined
				})

				this.isShowCreateEditPop = true
			},

			editHandle(e) {
				this.helloListObj = {
					brand: [],
					vehicleSeries: [],
					modelYearList: [],
					displacementList: [],
					brandName: undefined, //品牌
					seriesName: undefined, //车系
					modelYear: undefined, //年费
					displacement: undefined, //排量
				}
				this.detailId = e.id
				// 编辑

				detail({
					id: e.id
				}).then((res) => {
					this.searchCityData(res.helloVehicleTypeCode)
					setTimeout(() => {
						this.editInfo = {
							id: res.id,
							sipp: res.sipp, // 国际标准车型代码(车辆四字码)
							name: res.name, // 车型名称
							brandName: res.brandName, // 车型品牌
							vehiclePlateCode: res.vehiclePlateCode == 0 ? undefined : res
								.vehiclePlateCode, // 车牌照
							modelYear: res.modelYear, // 年款
							groupCode: res.groupCode, // 车型组编码
							outputVolumn: res.outputVolumn, // 排量值
							outputType: res.outputType, // 排量类型,T,L
							transmissionType: res.transmissionType, // 变速箱类型
							fuelType: res.fuelType, // 动力类型
							pcImgUrl: res.pcImgUrl, // PC端图片链接
							// mobileImgUrl: res.mobileImgUrl, // 手机端图片链接
							passengerNum: res.passengerNum, // 乘客数
							doorNum: res.doorNum, // 车门数
							description: res.description, //车型描述
						}

						this.createEditForm.setFieldsValue({
							id: res.id,
							sipp: res.sipp, // 国际标准车型代码(车辆四字码)
							name: res.name, // 车型名称
							brandName: res.brandName, // 车型品牌
							vehiclePlateCode: res.vehiclePlateCode == 0 ? undefined : res
								.vehiclePlateCode, // 车牌照
							modelYear: res.modelYear, // 年款
							groupCode: res.groupCode, // 车型组编码
							outputVolumn: res.outputVolumn, // 排量值
							outputType: res.outputType, // 排量类型,T,L
							transmissionType: res.transmissionType, // 变速箱类型
							fuelType: res.fuelType, // 动力类型
							pcImgUrl: res.pcImgUrl, // PC端图片链接
							// mobileImgUrl: res.mobileImgUrl, // 手机端图片链接
							passengerNum: res.passengerNum, // 乘客数
							doorNum: res.doorNum, // 车门数
							description: res.description, //车型描述
							// intervalMaintainMonths: res.intervalMaintainMonths, // 保养间隔时间(月)
							intervalMaintainLimit: res.intervalMaintainLimit, // 保养间隔里程(km)
							helloVehicleTypeCode: res.helloVehicleTypeCode
						})
					}, 500); // 设置延迟时间，单位为毫秒

					this.isShowCreateEditPop = true





				})
			},

			delPicHandle(t) {
				// 删除桌面端或者移动端的展示
				this.createEditForm.setFieldsValue({
					[t]: '',
				})
				this.editInfo = {
					...this.editInfo,
					[t]: '',
				}
			},

			delHandle(e) {
				// 删除操作
				this.$confirm({
					title: '提示',
					content: `您确定删除该车型吗？删除车型可能会导致服务商处该车型的车辆出现数据显示错误，请谨慎操作`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {
						deleteInfo({
							id: e.id
						}).then(() => {
							this.$message.success('删除成功！')
							if (this.pageList.length === 0 && this.pageNum > 1) this.pageNum--
							this._getPagedList()
						})
					},
				})
			},

			cancelHandle() {
				// 关闭弹框
				this.isShowCreateEditPop = false
			},

			confirmHandle() {
				// 确认弹框
				this.createEditForm.validateFields((err, values) => {
					console.log(values, '提交的数据')
					if (!err) {
						if (!values.pcImgUrl) return this.$message.error('请上传桌面端展示图片')
						// if (!values.mobileImgUrl) return this.$message.error('请上传移动端展示图片')
						const confirmFn = values.id > 0 ? edit : add
						this.createEditLoading = true
						if (values.vehiclePlateCode == undefined) {
							values.vehiclePlateCode = 0
						}
						values.helloVehicleTypeCode == values.helloVehicleTypeCode==0?undefined:values.helloVehicleTypeCode
						console.log(values.helloVehicleTypeCode,'ppp')
						// this.$utils.trimValue(values)
						confirmFn(values)
							.then(() => {
								this.isShowCreateEditPop = false
								this.$message.success(`${values.id ? '修改' : '新增'}成功！`)
								this._getPagedList()
							})
							.finally(() => {
								this.createEditLoading = false
							})
					}
				})
			},

			uploadSuccess(e, t) {
				// 图片上传
				console.log(e)
				this.createEditForm.setFieldsValue({
					[t]: e.path,
				})
			},

			openPreviewImage(e) {
				// 图片预览
				this.previewImage = e
				this.isPreviewVisible = true
			},
		},
	}
</script>

<style scoped lang="less">
	.ss-up-btn {
		border: 1px dashed #d9d9d9;
		background: #fafafa;
	}

	.ss-img {
		border: 1px solid #d9d9d9;
	}

	.mx-w-700 {
		max-width: 700px;
	}

	.mx-h-700 {
		max-height: 700px;
	}

	/deep/ .ant-form-item {
		margin-bottom: 10px;
	}

	.table-con {

		/deep/ .ant-table-thead>tr>th,
		/deep/ .ant-table-tbody>tr>td {
			padding: 12px;
		}
	}
</style>